<template>
  <div class="detail">
    <div class="detail-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <!-- {{detail}} -->
        <van-swipe-item v-for="url in detail.url" :key="url.index">
            <img :src="url">
            <!-- <span>{{url}}</span> -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="detail-intro">
      <h3>{{detail.title}}</h3>
      <div class="detail-info">
        <span>
          券后￥{{detail.price}}
          <del>原价：{{detail.originPrice}}</del>
        </span>
        <span>{{detail.couponValue}}</span>
      </div>
      <div class="detail-time">
        活动火热进行中~
        <span>{{ detail.expireDate }}截止</span>
      </div>
      <h2>
        <span>———— 商品图文详情 ————</span>
      </h2>
      <div class="photo">
        <img :src="detail.url">
        <img :src="detail.image">
      </div>
      <div class="store">
        <img :src="detail.picUrl" alt="">
        <h4>{{ detail.nickname }}</h4>
        <p>物流评分：{{ detail.shopScoreText }}</p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" to="/cart" text="购物车" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" @click="collection({ detail })"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCart({ detail })"/>
      <van-goods-action-button type="danger" text="立即购买" to="/cart" @click="addToCart({ detail })"/>
    </van-goods-action>
    <div class="gotop" v-show="gotop" @click="toTop">Top</div>
  </div>
</template>

<script>
import {
  mapMutations
} from 'vuex'
export default {
  data () {
    return {
      id: '',
      detail: [],
      time: '',
      gotop: false
    }
  },
  async created () {
    await this.init()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    async init () {
      this.id = this.$route.query.id
      const res = await this.$http.getShop(this.id)
      if (res) {
        this.detail = res
        this.detail.url = res.url.split(',')
      }
      this.myDate = new Date()
    },
    ...mapMutations(['addToCart', 'collection']),
    toTop () {
      location.reload()
    },
    handleScroll (e) {
      if (e.target.scrollTop > 300) {
        this.gotop = true
      } else {
        this.gotop = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  line-height: 2;
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  &-swipe {
    img {
      width: 100%;
      height: 400px;
    }
  }
  h3 {
    font-size: 14px;
    color: #43240c;
  }
  &-intro {
    padding: 0 10px;
  }
  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span:first-child {
      font-size: 18px;
      font-family: "宋体";
      color: #ee0a24;
      del {
        font-size: 14px;
        color: #999;
        padding-left:5px;
      }
    }
    span:last-child {
        font-size: 12px;
        color: #999;
    }
  }
  &-time {
    font-size: 14px;
    height: 30px;
    line-height: 20px;
    color: #ee0a24;
    font-weight: 800;
    span {
      float: right;
      color: black;
      font-weight: 100;
    }
  }
  .store {
    border-top: 1px solid #ddd;
    height: 70px;
    line-height: 30px;
    font-size: 14px;
    img {
      float: left;
      height:100%;
      margin-right: 10px;
    }
  }
  .photo {
    width: 100%;
    img {
      width: 100%;
    }
  }
  h2 {
    text-align: center;
    height: 50px;
    font-size: 14px;
    color: #999;
    line-height: 50px;
    border-top: 1px solid #ddd;
  }
}
.gotop {
  text-align: center;
  position: fixed;
  right: 15px;
  bottom: 100px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: lightskyblue;
  color: white;
}
</style>
